<template>
  <div class="container" v-if="$route.path === '/canteen/canteen-settings'">
    <div class="header">
      <div class="hd-left">
        <el-form :model="searchForm" :inline="true" ref="searchRef">
          <el-form-item label="食堂" prop="name">
            <el-input
              v-model="searchForm.name"
              placeholder="请输入食堂名称"
              style="width: 200px; margin-right: 10px"
              size="small"
            ></el-input
          ></el-form-item>
          <el-form-item>
            <TsButton
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="search"
              perms="canteen:page:get"
              label="搜索"
            ></TsButton>
            <el-button icon="el-icon-refresh-right" size="small" @click="reset"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="hd-right c-m-t-5">
        <TsButton
          type="primary"
          size="small"
          @click="edit"
          label="新增"
          perms="canteen:post"
        ></TsButton>
        <TsButton
          label="删除"
          perms="canteen:delete"
          type="danger"
          size="small"
          @click="delMultiple"
        ></TsButton>
      </div>
    </div>
    <!--    表格区域-->
    <div class="table" style="height: calc(100% - 160px); overflow-y: auto">
      <el-table
        :header-cell-style="{ background: '#FEF6F6' }"
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="名称" />
        <el-table-column label="图片">
          <template #default="scope">
            <el-image :src="scope.row.image" style="width: 60px; height: 60px">
              <template #error>
                <div class="image-slot">
                  <img
                    src="https://www.mingxiaobang.cn/upload/admin/cent_no.jpg"
                    style="width: 60px; height: 60px"
                  />
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地点" show-overflow-tooltip />
        <el-table-column label="营业时间">
          <template #default="scope">
            <span>{{ scope.row.openStartTime }}</span> -
            <span>{{ scope.row.openEndTime }}</span>
          </template>
        </el-table-column>
        <el-table-column sortable prop="sort" label="排序" />
        <el-table-column label="操作">
          <template #default="scope">
            <TsButton
              label="编辑"
              icon="el-icon-edit"
              type="text"
              @click="edit(scope.row)"
              size="small"
              perms="canteen:$id:put"
            ></TsButton>
            <TsButton
              icon="el-icon-delete"
              type="text"
              @click="del(scope.row.id)"
              size="small"
              style="color: #ff5d5d"
              label="删除"
              perms="canteen:$id:delete"
            >
            </TsButton>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="float: right; margin: 20px"
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="pageNum"
      :page-size="pageSize"
      layout=" prev, pager, next"
      :total="totalNum"
      background
    >
    </el-pagination>
  </div>
  <router-view></router-view>
</template>

<script>
import Canteen from "@/composables/canteen/canteen-settings";
import commonPageRepository from "../../../composables/common-page-repository";
import TsButton from "../../../components/TsButton";

export default {
  name: "CanteenSettings",
  components: { TsButton },
  setup() {
    const {
      tableData,
      delMultiple,
      edit,
      del,
      searchRef,
      reset,
      totalNum,
      handleSelectionChange,
      pageSize,
      pageNum,
      search,
      searchForm,
      getCanteenData,
      multipleTable,
    } = Canteen();
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getCanteenData
    );
    return {
      tableData,
      searchForm,
      search,
      searchRef,
      edit,
      del,
      reset,
      delMultiple,
      totalNum,
      pageSize,
      multipleTable,
      pageNum,
      pageSizeChange,
      pageCurrentChange,
      handleSelectionChange,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  background: #ffffff;
  height: calc(100vh - 200px);
  box-shadow: 0px 0px 16px rgba(96, 96, 96, 0.16);
  border-radius: 6px;
  margin: 20px 0;
  padding: 10px 20px;
  overflow-y: auto;

  .header {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
